<script setup>
import { ref } from 'vue'
import AppSider from '../components/AppSider.vue'
import AppHeader from '../components/AppHeader.vue'
import TagsView from '../components/TagsView.vue'

const isCollapse = ref(false)
const isDark = ref(false)
</script>

<template>
  <div class="layout-container" :class="{ 'dark': isDark }">
    <el-container class="main-container">
      <AppSider :is-collapse="isCollapse" />
      <el-container class="content-container">
        <AppHeader 
          v-model:is-collapse="isCollapse"
          v-model:is-dark="isDark"
        />
        <tags-view />
        <el-main :class="['main-content', { 'collapsed': isCollapse }]">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--el-bg-color);
}

.main-container {
  width: 100%;
  height: 100%;
}

.content-container {
  min-width: 0;
  background-color: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
}

.main-content {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background-color: var(--el-bg-color-page);
  transition: width 0.3s;
  position: relative;
  height: calc(100vh - 90px);
}

.main-content.collapsed {
  width: calc(100vw - 64px);
  height: calc(100vh - 90px); /* 这里也需要修改 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
